<script setup>
import { ref } from 'vue';
const currentForm = ref('login')
import { Lock, Avatar, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

//定义数据模型
const LoginData = ref({
    username: 'Rainbow',
    password: '123456',
    email: ''
})

// 邮箱验证函数
const checkEmail = (rule, value, callback) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (value === '') {
        callback(new Error('请输入邮箱号'));
    } else if (!emailRegex.test(value)) {
        callback(new Error('请输入正确的邮箱地址'));
    } else {
        callback();
    }
};

//定义表单校验规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 12, message: '长度为3~12位非空字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱号', trigger: 'blur' },
        { validator: checkEmail, trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 12, message: '长度为6~12位非空字符', trigger: 'blur' }
    ],
}

//清除表单数据
const clearData = () => {
    LoginData.value = {
        username: '',
        email: '',
        password: '',
    }
}

//调用后台接口完成注册 网页转发
import { userLoginService, userRegisterService } from '@/api/user.js'
//路由
import { useRouter } from 'vue-router'
const router = useRouter()

//登录接口
const login = async () => {
    // 检查用户名和密码是否为空
    if (!LoginData.value.username || !LoginData.value.password) {
        ElMessage.warning('请填写用户名和密码');
        return;
    }

    try {
        let result = await userLoginService(LoginData.value);
        console.log(result)
        if (result.code !== 0) {
            ElMessage.error(result.message);
            return;
        }

        ElMessage.success('登录成功')

        //借助路由跳转
        router.push('/char')
    }
    catch (error) {
        ElMessage.error(error.message)
    }

}

//注册接口
const register = async () => {

    // 检查用户名、密码、昵称、邮箱、密码是否为空
    if (!LoginData.value.username || !LoginData.value.email || !LoginData.value.password) {
        ElMessage.warning('请填写完整！');
        return; // 如果为空，直接返回，不执行后续逻辑
    }

    try {
        let result = await userRegisterService(LoginData.value);
        ElMessage.success(result.msg ? result.msg : '注册成功')
        clearData()
        currentForm.value = 'login'
    }
    catch (error) {
        ElMessage.error(error.message)
    }

}
</script>

<template>
    <el-row class="login-page">
        <el-col :span="24">
            <el-row type="flex" justify="center" align="middle" class="form-container">
                <el-card class="form-card">
                    <el-col :span="24" class="form">
                        <!-- 登录表单 -->
                        <!-- autocomplete="off" : 浏览器不会自动弹出之前输入过的历史记录 -->
                        <el-form ref="loginform" size="large" autocomplete="off" v-if="currentForm === 'login'"
                            :model="LoginData" :rules="rules">
                            <el-form-item>
                                <h1>登录</h1>
                            </el-form-item>
                            <el-form-item prop="username">
                                <el-input :prefix-icon="Avatar" placeholder="请输入用户名"
                                    v-model="LoginData.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                                    v-model="LoginData.password"></el-input>
                            </el-form-item>
                            <!-- 登录按钮 -->
                            <el-form-item>
                                <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
                            </el-form-item>

                            <el-form-item class="flex">
                                <el-link type="info" :underline="false" @click="currentForm = 'register'; clearData()">
                                    注册 →
                                </el-link>
                            </el-form-item>
                        </el-form>

                        <!-- 注册表单 -->
                        <el-form ref="form" size="large" autocomplete="off" v-if="currentForm === 'register'"
                            :model="LoginData" :rules="rules">
                            <el-form-item>
                                <h1>注册</h1>
                            </el-form-item>
                            <el-form-item prop="username">
                                <el-input :prefix-icon="Avatar" placeholder="请输入用户名"
                                    v-model="LoginData.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                                    v-model="LoginData.password"></el-input>
                            </el-form-item>
                            <el-form-item prop="email">
                                <el-input :prefix-icon="Message" placeholder="请输入邮箱"
                                    v-model="LoginData.email"></el-input>
                            </el-form-item>
                            <!-- 注册按钮 -->
                            <el-form-item>
                                <el-button class="button" type="primary" auto-insert-space @click="register">
                                    注册
                                </el-button>
                            </el-form-item>
                            <el-form-item class="flex">
                                <el-link type="info" :underline="false" @click="currentForm = 'login', clearData()">
                                    ← 返回
                                </el-link>
                            </el-form-item>
                        </el-form>

                    </el-col>
                </el-card>
            </el-row>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
.login-page {
    height: 100vh;
    background-image: url('/src/assets/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .form-container {
        height: 100%;

        .form {
            display: flex;
            flex-direction: column;
            justify-content: center;
            user-select: none;

            .title {
                margin: 0 auto;
            }

            .button {
                width: 100%;
            }

            .flex {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .el-link {
                    color: #000 !important;
                }
            }
        }

        .form-card {

            width: 480px;

            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 兼容Safari */
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
            transition: background-color 0.3s ease;
        }
    }
}
</style>